<template>
  <div id="base">
    <el-card>
      <div slot="header" class="clearfix">
        <span>实名认证（苹果系统请使用原生浏览器）</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">上传身份证头像面</el-col>
        <el-col :span="16">
          <input id="zm" type="file" @change="zmDis" style="display: none"/>
          <img :src="zmImg" alt="Preview" @click="touch('zm')" style="width: 100%; height: 250px;"/>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">上传身份证国徽面</el-col>
        <el-col :span="16">
          <input id="bm" type="file" @change="bmDis" style="display: none"/>
          <img :src="bmImg" alt="Preview" @click="touch('bm')" style="width: 100%; height: 250px;"/>
        </el-col>
      </el-row>
    </el-card>
    <el-button @click="uploadFile()" style="width: 100%;" type="primary">实名认证</el-button>
  </div>
</template>

<script>
  import {addAuthImg, faceAuth} from '@/api/system/query.js'
  import {zip} from "../api/util"

  export default {
    name: "auth",
    data() {
      return {
        ID: undefined,
        zmImg: require('../assets/images/card_z.1be787d5.png'),
        bmImg: require('../assets/images/card_f.e5059b98.png'),
      }
    },
    created() {
      this.ID = this.$route.query.ID
    },
    methods: {
      touch(item) {
        document.getElementById(item).click()
      },
      zmDis(event) {
        const file = event.target.files[0]
        if (file) {
          const reader = new FileReader()
          reader.onload = (e) => {
            this.zmImg = e.target.result
          }
          reader.readAsDataURL(file)
        }
      },
      bmDis(event) {
        const file = event.target.files[0]
        if (file) {
          const reader = new FileReader()
          reader.onload = (e) => {
            this.bmImg = e.target.result
          }
          reader.readAsDataURL(file)
        }
      },
      async uploadFile() {
        let zmFile = document.getElementById("zm").files[0]
        let bmFile = document.getElementById("bm").files[0]
        if (zmFile == null) {
          this.$modal.msgWarning("请上传身份证头像面")
          return
        } else if (bmFile == null) {
          this.$modal.msgWarning("请上传身份证国徽面")
          return
        }
        if (zmFile.type.indexOf("image") == -1) {
          this.$modal.msgWarning("头像面非图片")
          return
        }
        if (bmFile.type.indexOf("image") == -1) {
          this.$modal.msgWarning("国徽面非图片")
          return
        }
        let z1 = zip(zmFile)
        let z2 = zip(bmFile)
        Promise.all([z1, z2]).then(res => {
          let fd = new FormData()
          fd.append('files', res[0])
          fd.append('files', res[1])
          fd.append("ID", this.ID)
          this.$modal.loading("核验中...")
          addAuthImg(fd).then(res => {
            if (res.status == 200) {
              console.log('----发起人脸身核----')
              faceAuth(this.ID).then(res => {
                console.log('----res----', res)
                window.location.href = res
              })
            } else {
              this.$modal.closeLoading()
              this.$modal.alert(res.msg)
            }
          })
        })
      }
    }
  }
</script>

<style scoped>
  #base {
    margin: 10px;
  }
</style>
